<template>
	<view>
		<view>
			<view class="" style="display: flex; margin-top: 40rpx; padding: 40rpx 60rpx">
				<view class="">
					<image style="width: 200rpx; height: 250rpx;" @click="clickImg(studentInfo.stuPhoto)"
						:src="studentInfo.stuPhoto ?studentInfo.stuPhoto:'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png'"
						mode=""></image>
				</view>

				<view style="margin-left: 80rpx;display: flex; flex-direction: column; justify-content: space-around;">
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">宿舍号：</view>
						<view class="character">{{studentInfo.dormitoryName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">姓名：</view>
						<view class="character">{{studentInfo.studentName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">性别：</view>
						<view class="character">{{studentInfo.sex == 0 ?"男" :"女"}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">班级：</view>
						<view class="character">{{studentInfo.className}}</view>
					</view>

					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任：</view>
						<view class="character">{{studentInfo.teacherName}}</view>
					</view>
					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任电话：</view>
						<view class="character">{{studentInfo.teacherPhone}}</view>
					</view>
				</view>
			</view>


			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				activeColor="#3333a3"></uni-segmented-control>

			<view v-show="current === 0">
				<view
					style="display: flex; padding: 60rpx 60rpx 0 60rpx; align-items: center; justify-content: space-between;">
					<view class="" style="display: flex; align-items: center;">
						<image src="../../../static/pic/tixinglanse.png"
							style="width: 50rpx; height: 50rpx; padding: 10rpx;" mode=""></image>
						<view>宿舍管理员（补卡处理）</view>
					</view>
					<view class="" style="display: flex;">
						<!-- <view class="" style="font-size: 28rpx; color: #aaa;">对未打卡学生进行拍照补卡</view> -->
						<uni-icons v-if="checkShow" type="bottom" size="20" @click="changeCheckShow"></uni-icons>
						<uni-icons v-else type="top" size="20" @click="changeCheckShow"></uni-icons>
					</view>
				</view>

				<view v-if="checkShow" style="border-bottom: 1rpx solid #ddd; padding-bottom: 40rpx;">
					<view style="display: flex; padding:0 60rpx; align-items: center; justify-content: space-between;">
						<view class="" style="display: flex; align-items: center;">
							<image src="" style="width: 50rpx; height: 50rpx; padding: 10rpx;" mode=""></image>
							<view style="color: #aaa;">对未打卡学生进行拍照补卡</view>
						</view>
					</view>
					<uni-file-picker style="transform: translateX(35%);" limit="1" @delete="deletePhoto"
						@select="select" file-mediatype="image" v-model="imageValue"></uni-file-picker>

					<view class="tijiao" @click="submitCard">提交在寝补卡</view>
				</view>
			</view>
			<view v-show="current === 1">
				<view
					style="display: flex; padding: 60rpx 60rpx 0 60rpx; align-items: center; justify-content: space-between;">
					<view class="" style="display: flex; align-items: center;">
						<image src="../../../static/pic/tixinglanse.png"
							style="width: 50rpx; height: 50rpx; padding: 10rpx;" mode=""></image>
						<view>提交班主任处理</view>
					</view>
					<view class="" style="display: flex;">

						<uni-icons v-if="handleShow" type="bottom" size="20" @click="changeHandleShow"></uni-icons>
						<uni-icons v-else type="top" size="20" @click="changeHandleShow"></uni-icons>
					</view>
				</view>

				<view v-if="handleShow" style="padding: 30rpx 60rpx;">
					<radio-group @change="checkFlag" style="padding: 0 50rpx;">
						<view style="display: flex; align-items: center;" :class="index !=0 ?'topShow' :'' "
							v-for="(item,index) in radioList" :key="index">
							<radio :value="item.value" />
							<view style="">{{item.text}}</view>
						</view>
					</radio-group>
					<view class="tijiao" style="margin-top: 30rpx;" @click="handleClick">提交确认</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import taskNotReturned from "@/api/modules/taskNotReturned.js"
	import managementTeacher from "@/api/modules/managementTeacher.js"
	import teacherClass from "@/api/modules/teachClass.js"
	import {
		parseTime
	} from "@/utils/date.js"
	export default {
		data() {
			return {
				radioList: [{
					value: "1",
					text: "已联系班主任",
				}, {
					value: "2",
					text: "无联系班主任提交，已提交宿管负责人",
				}],
				bzrUrl: "",
				topName: "处理未打卡",
				userName: "",
				studentInfo: {},
				notReturnedDate: "",
				reason: "",
				buildNo: "",
				date: "",
				processContent: "",
				recordList: [],
				studentId: "",
				flag: "",
				imageValue: [],
				mendCardPhoto: "",
				createSubmitType: "",
				checkShow: true,
				handleShow: true,
				id: "",
				type: "",
				current: 0,
				items: ["宿舍补卡处理", "提交班主任处理"]
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			checkFlag(e) {
				console.log(e)
				this.radioList.forEach(item => {
					if (e.detail.value == item.value) {
						this.processContent = item.text
					}
				})
				this.createSubmitType = e.detail.value
			},
			handleClick() {
				console.log({
					applyId: "notRetrunApplyNew",
					applyStatus: "1",
					classId: this.studentInfo.classId,
					createBy: this.userName,
					notRetrunedDate: this.notReturnedDate,
					sdId: this.studentInfo.bdormitoryId,
					studentId: this.studentId,
					createSubmitType: this.createSubmitType,
				})
				managementTeacher.createApply({
					applyId: "notRetrunApplyNew",
					applyStatus: "1",
					classId: this.studentInfo.classId,
					createBy: this.userName,
					notRetrunedDate: this.notReturnedDate,
					createSubmitLabel: this.processContent,
					sdId: this.studentInfo.bdormitoryId,
					studentId: this.studentId,
					createSubmitType: this.createSubmitType,
				}).then(res => {
					uni.showToast({
						title: "提交成功"
					})
					uni.navigateTo({
						url: this.bzrUrl
					})
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err.data.message,
						icon: "none"
					})
				})
			},
			changeHandleShow() {
				this.handleShow = !this.handleShow
			},
			changeCheckShow() {
				this.checkShow = !this.checkShow
			},

			select(e) {
				uni.uploadFile({
					url: uni.url + 'common/uploadFile', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test',
					},
					header: {
						Authorization: "Bearer " + uni.getStorageSync("token"),
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes)
						this.mendCardPhoto = JSON.parse(uploadFileRes.data).data
						console.log(this.mendCardPhoto)
					}
				});
			},
			submitCard() {
				if (!this.mendCardPhoto) {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					})
					return
				}
				taskNotReturned.updateStudentSdAttence({
					id: this.id,
					mendCardPhoto: this.mendCardPhoto,
					attenceStatus: "1"
				}).then(res => {
					console.log(res)
					uni.navigateTo({
						url: `/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents?buildNo=${this.buildNo}&date=${this.date}&flag=1`
					})
					this.imageValue = []
				})
			},
			deletePhoto(e) {
				this.mendCardPhoto = ""
			},
			cancelSubmit() {
				this.$refs.popup.close()
			},
			clickImg(img) {
				uni.previewImage({
					urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
		},
		onLoad(options) {
			console.log(options.buildNo)
			console.log(options.searchDate)
			if (options.flag == 9) {
				this.bzrUrl =
					`/pages_main/managementTeacher/allTypeUnStudentList/allTypeUnStudentList?buildNo=${options.buildNo}&date=${options.searchDate}&current=${options.current}&storey=${options.storey}&attenceStatus=${options.attenceStatus}`
			} else {
				this.bzrUrl =
					`/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents?buildNo=${options.buildNo}&searchDate=${options.searchDate}&current=${options.current}`
			}

			this.userName = uni.getStorageSync("userName")
			this.studentId = options.studentId
			this.notReturnedDate = options.accessDate.slice(0, 10)
			this.id = options.id
			taskNotReturned.getStudentById(this.studentId).then(res => {
				this.studentInfo = res.data
			})

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;

	}

	.character {
		/* width: 150rpx; */
		font-size: 26rpx;
		/* color: #979999; */
		color: #444;
	}

	.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 20vh;
		background-color: #fff;
		width: 500rpx;
	}

	.box {
		/* margin-top: 20rpx; */
		border-top: 1rpx solid #ddd;
	}

	.box:nth-child(1) {
		margin-top: -20rpx;
		border-top: none;
	}


	.card {
		width: 86%;
		/* border: 1rpx #000 solid; */
		padding: 20rpx 10rpx 20rpx 10rpx;
		display: flex;
		font-size: 24rpx;
		justify-content: space-between;
	}

	.ftColor {
		color: #3333d3;
	}

	.cancel {
		/* width: 35%; */
		background-color: #a0a0a0;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	.tijiao {
		margin: 20rpx auto 0;
		width: 450rpx;
		background-color: #3333d3;
		padding: 20rpx;
		text-align: center;
		border-radius: 20rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	/deep/.file-picker__box[data-v-4c5c5653] {
		width: 20%;
		height: 70rpx;
	}

	.queren {
		width: 230rpx;
		height: 50rpx;
		background-color: #3333d3;
		color: #fff;
		margin-top: 10rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 10rpx;
	}

	.queren2 {
		width: 230rpx;
		height: 50rpx;
		background-color: #ff009a;
		color: #fff;
		margin-top: 10rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 10rpx;
	}

	.topShow {
		margin-top: 20rpx;
	}

	/* .segmented-control__item--button--first[data-v-064e9cd1]{
		background-color: #aaa;
	} */

	/deep/.segmented-control__item--button--first[data-v-064e9cd1] {
		border: none;
		background-color: #f1f1f1;
	}

	/deep/.segmented-control__item--button--last[data-v-064e9cd1] {
		border: none;
		background-color: #f1f1f1;
	}
</style>